<template>
    <div style="width:100%;height:100%;overflow: hidden;">
     <div id="main-map"></div>
    </div>
</template>
<script>
import imag from '../../src/assets/timg.gif'
export default {
    data () {
        return {
         map:null,
         context:null,
         data :null,
         radius :10
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        pointOnCircle(angle) {
                return {
                "type": "Point",
                "coordinates": [
                Math.cos(angle) * this.radius,
                Math.sin(angle) * this.radius
                ]
                };
                console.log(angle)
        },
          animateMarker(timestamp) {
                // Update the data to a new position based on the animation timestamp. The
                // divisor in the expression `timestamp / 1000` controls the animation speed.
                this.map.getSource('point').setData(this.pointOnCircle(timestamp / 1000));
                
                // Request the next frame of the animation.
                requestAnimationFrame(this.animateMarker);
        },
        init(){
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'main-map',
              mapId: 'map_id_1',
              center: [0, 0],
              zoom: 0.5
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
           
            this.map.on('load',() =>{
                this.map.addSource('point', {
                "type": "geojson",
                "data": this.pointOnCircle(5)
                });
                
                this.map.addLayer({
                "id": "point",
                "source": "point",
                "type": "circle",
                "paint": {
                "circle-radius": 10,
                "circle-color": "#007cbf"
                }
                });
            this.animateMarker(0);
            // this.map.zoomT0([0, 0])
          });
          
        }
    }
}
</script>
<style lang="scss" scoped>
#main-map{
    width: 100%;
    height: 100%;
}
#pause {
    z-index: 30;
    position: absolute;
    margin: 20px;
}
 
#pause::after {
    content: 'Pause';
}
 
#pause.pause::after {
    content: 'Play';
}
</style>